<template>
  <div class="shoplist_container">
     <router-link to="/addSuggest" class="add_icon_footer" >
            <img src="../../../images/add_address.png" height="30" width="30">
            <span>新增</span>
        </router-link>
    <ul class="ullist">
      <router-link
        :to="{path: '', query:{}}"
        v-for="item in list"
        tag="li"
        :key="item.id"
        class="shop_li"
      >
        <hgroup class="shop_right">
          <header class="shop_detail_header">
            <h4 class="shop_title ellipsis">{{item.title}}</h4>
          </header>
          <h5 class="rating_order_num">
            <section class="rating_order_num_left">
              <section class="rating_section">
                <span class="rating_num">{{item.area}}</span>
              </section>
              <section class="order_section">:{{item.content}}</section>
            </section>
        
          </h5>
          <h5 class="fee_distance">
            <p class="distance_time">
              <span v-if="item.isreply=='y'" class="order_time2">已处理</span>
              <span v-else class="order_time1">未处理</span>
              <span class="segmentation">/</span>
              <span class="order_time">{{item.createTime}}</span>
            </p>
          </h5>
          <el-collapse v-if="item.isreply=='y'">
            <el-collapse-item title="物业回复">
              <!-- <span class="order_time1" >{{reply[item.id]}}+{{item.id}}</span> -->

              <input type="text" v-model="reply[item.id]" />
            </el-collapse-item>
          </el-collapse>
        </hgroup>
      </router-link>
    </ul>
  </div>
</template> 
<script>
export default {
  data: function() {
    return {
      list: [], //列表
      listLoading: true,
      reply: []
    };
  },

  methods: {
   
  },
  mounted: function() {
    var vm = this;
    this.axios({
      method: "GET",
      url: "http://172.16.9.15:8082/complaint/selectOneSuggest",
       params: { 
          userId: sessionStorage.getItem("userId"),
         }
    }).then(function(res) {
      vm.list = res.data.data.suggests;
  
      vm.listLoading = false;
    });

    this.axios({
      method: "GET",
      url: "http://172.16.9.15:8082/complaint/reply/selectAllReply"
    }).then(function(res) {
      var n = res.data.data.replies.length;
     
      for (var i = 0; i < n; i++) {
        vm.reply[res.data.data.replies[i].cid] =
          res.data.data.replies[i].content;
      }
     
      vm.listLoading = false;
    });
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.add_icon_footer{
        position: fixed;
        top: 100px;
       
        right: 20px;
        height: 2.5rem;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 204;
        span{
            @include sc(.7rem, $blue);
            margin-left: .3rem;
        }
    }

.ullist{
  margin-top: 50px;
}
.shoplist_container {
  background-color: #fff;
  margin-bottom: 2rem;
}
.shop_li {
  display: flex;
  border-bottom: 0.025rem solid #f1f1f1;
  padding: 0.7rem 0.4rem;
}
.shop_img {
  @include wh(2.7rem, 2.7rem);
  display: block;
  margin-right: 0.4rem;
}
.list_back_li {
  height: 4.85rem;
  .list_back_svg {
    @include wh(100%, 100%);
  }
}
.shop_right {
  flex: auto;
  .shop_detail_header {
    @include fj;
    align-items: center;
    .shop_title {
      width: 8.5rem;
      color: #333;
      padding-top: 0.01rem;
      @include font(0.65rem, 0.65rem, "PingFangSC-Regular");
      font-weight: 700;
    }
    .premium::before {
      content: "品牌";
      display: inline-block;
      font-size: 0.5rem;
      line-height: 0.6rem;
      color: #333;
      background-color: #ffd930;
      padding: 0 0.1rem;
      border-radius: 0.1rem;
      margin-right: 0.2rem;
    }
    .shop_detail_ul {
      display: flex;
      transform: scale(0.8);
      margin-right: -0.3rem;
      .supports {
        @include sc(0.5rem, #999);
        border: 0.025rem solid #f1f1f1;
        padding: 0 0.04rem;
        border-radius: 0.08rem;
        margin-left: 0.05rem;
      }
    }
  }
  .rating_order_num {
    @include fj(space-between);
    height: 0.9rem;
    margin-top: 0.52rem;
    .rating_order_num_left {
      @include fj(flex-start);
      .rating_section {
        display: flex;
        .rating_num {
          @include sc(0.6rem, #ff6000);
          margin: 0 0.2rem;
        }
      }
      .order_section {
        transform: scale(0.8);
        margin-left: -0.2rem;
        @include sc(0.7rem, #666);
      }
    }
    .rating_order_num_right {
      display: flex;
      align-items: center;
      transform: scale(0.7);
      min-width: 5rem;
      justify-content: flex-end;
      margin-right: -0.8rem;
      .delivery_style {
        font-size: 0.4rem;
        padding: 0.04rem 0.08rem 0;
        border-radius: 0.08rem;
        margin-left: 0.08rem;
        border: 1px;
      }
      .delivery_left {
        color: #fff;
        background-color: $blue;
        border: 0.025rem solid $blue;
      }
      .delivery_right {
        color: $blue;
        border: 0.025rem solid $blue;
      }
    }
  }
  .fee_distance {
    margin-top: 0.52rem;
    @include fj;
    @include sc(0.5rem, #333);
    .fee {
      transform: scale(0.9);
      @include sc(0.5rem, #666);
    }
    .distance_time {
      transform: scale(0.9);
      span {
        color: #999;
      }
      .order_time {
        color: $blue;
      }
      .order_time1 {
        color: red;
      }
      .order_time2 {
        color: green;
      }
      .segmentation {
        color: #ccc;
      }
    }
  }
}
</style>
